﻿@using Microsoft.Extensions.Options
@namespace BootstrapBlazor.Components
@inherits BootstrapComponentBase

<div @ref="@ThemeElement" class="theme">
    <div class="btn btn-theme" data-bs-toggle="tooltip" title="@Title" data-bs-placement="left">
        <img src="_content/BPM.Web.Shared/images/m.svg" class="m-logo" />
        <div class="pulse pulse-warning">
            <span class="pulse-ring"></span>
        </div>
    </div>

    <div class="theme-list">
        <div class="theme-header">
            <div>系统配置</div>
            <span class="theme-close" aria-hidden="true">&times;</span>
        </div>

        <div class="row">
            <div class="col-12">
                <RadioList TValue="SelectedItem" Items="@(new SelectedItem[]{new SelectedItem("left-right", "左右结构"),new SelectedItem("top-bottom", "上下结构")})"/>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-12">
                <Checkbox @bind-Value="State.ShowFooter" ShowAfterLabel="true" DisplayText="显示页脚" />
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-12">
                <Switch @bind-Value="@State.UseTabSet" OnText="多标签" OffText="单页" OnColor="@Color.Success" OffColor="@Color.Secondary" style="width: 120px;"></Switch>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-12">
                <Checkbox @bind-Value="@State.IsFixedHeader" ShowAfterLabel="true" DisplayText="固定页头" class="me-3" />
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-12">
                <Checkbox @bind-Value="@State.IsFixedFooter" ShowAfterLabel="true" DisplayText="固定页脚" />
            </div>
        </div>
                
    </div>
</div>

@code
{
    /// <summary>
    /// 当前会话状态
    /// </summary>
    [CascadingParameter]
    public SessionState State { get; set; } = new();

    private ElementReference ThemeElement { get; set; }

    [NotNull]
    private IEnumerable<SelectedItem>? Themes { get; set; }

    [NotNull]
    private string? Title { get; set; }

    [NotNull]
    private string? HeaderText { get; set; }

    [Inject]
    [NotNull]
    private IStringLocalizer<ThemeChooser>? Localizer { get; set; }

    [Inject]
    [NotNull]
    private IOptions<BootstrapBlazorOptions>? BootstrapOptions { get; set; }

    [Inject]
    [NotNull]
    private IOptions<AppOptions>? SiteOptions { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Title ??= Localizer[nameof(Title)];
        HeaderText ??= Localizer[nameof(HeaderText)];
        Themes = BootstrapOptions.Value.Themes.Select(kv => new SelectedItem(kv.Value, kv.Key));
        SiteOptions.Value.CurrentTheme = Themes.FirstOrDefault(i => i.Text == "Motronic")?.Value ?? "";
    }

    /// <summary>
    /// OnAfterRenderAsync 方法
    /// </summary>
    /// <param name="firstRender"></param>
    /// <returns></returns>
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("$.initTheme", ThemeElement);
        }
    }
}
